<!-- 检票员端 绑定班车 -->
<template>
  <div class="container">
    <div class="head">
      <div class="scan-wrap">
        <div class="ipt-wrap">
          <input type="text" class="ipt" readonly v-model="scanRes" placeholder="请扫码">
        </div>
        <div class="scan-btn" @click="onScan">
          <i class="iconfont icon-scan"></i>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="content-wrap">
        <div class="title-wrap">
          <div class="title">当前绑定班车</div>
          <div class="btn" @click="onNavTo" v-if="currDetlData.shuttle_name">
            查看学生名单 <van-icon name="arrow" />
          </div>
        </div>
        <div class="detl-wrap">
          <template v-if="currDetlData.shuttle_name">
            <div class="field-wrap" v-for="(item, i) in fieldList" :key="i">
              <div class="label">{{ item.label }}</div>
              <div class="val">{{ currDetlData[item.key] }}</div>
            </div>
            <van-button class="btn" color="#2882FE" @click="onUnbind">解绑</van-button>
          </template>
          <van-empty v-else description="未绑定班车" />
        </div>
      </div>
      <div class="content-wrap">
        <div class="title-wrap">
          <div class="title">扫码结果</div>
        </div>
        <div class="detl-wrap">
          <template v-if="detlData.shuttle_name">
            <div class="field-wrap" v-for="(item, i) in fieldList" :key="i">
              <div class="label">{{ item.label }}</div>
              <div class="val">{{ detlData[item.key] }}</div>
            </div>
            <van-button class="btn" color="#2882FE" @click="onBind">绑定</van-button>
          </template>
          <van-empty v-else description="请扫码" />
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { Toast, Empty, } from 'vant'
import { getWxJssdkConfParams, } from '@/utils/wxJssdkConfigParams'


export default {
  name: '',
  components: {
    [Empty.name]: Empty,
  },
  computed: {
    
  },
  data() {
    return {
      fieldList: [
        { key: 'shuttle_id', label: '班车编号', type: 'text', disabled: true, },
        { key: 'shuttle_name', label: '班车名称', type: 'text', disabled: true, },
        { key: 'packag_type_name', label: '套票标签', type: 'text', disabled: true, },
      ],
      currDetlData: {
        shuttle_name: '智城1号',
        shuttle_id: 'zc001',
        packag_type_name: '2023下学期',
      },
      detlData: {
        // shuttle_name: '佛山市第六小学2号线',
        // shuttle_id: 'fssdlxx2hx',
        // packag_type_name: '2023至2024学年去程期',
      },

      scanRes: '',
      wx: null,
    }
  },
  watch: {},
  created() {
    getWxJssdkConfParams().then(res => {
      this.wx = res
    }, err => {
      console.log('err', err);
    })
  },
  methods: {
    onScan() {
      if(!this.wx) return
      this.wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
        success: (res) => {
          let result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
          this.scanRes = result
          // 获取数据
          this.getDetlData()
        }
      })
    },
    onBind() {
      Toast('绑定成功')
      this.currDetlData = {
        ...this.detlData,
      }
    },
    onUnbind() {
      Toast('解绑成功')
      this.currDetlData = {}
    },
    onNavTo() {
      this.$router.push({ name: 'blist', })
    },

    // 假数据
    getDetlData() {
      if(!this.scanRes) return
      Toast.loading({
        duration: 0,
        forbidClick: true,
      })
      let timer = setTimeout(() => {
        Toast.clear()
        clearTimeout(timer)

        this.detlData = {
          shuttle_name: '佛山市第六小学2号线',
          shuttle_id: 'fssdlxx2hx',
          packag_type_name: '2023至2024学年去程期',
        }
      }, 500)
    },
  },
}
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: calc(100% - 50px);
  box-sizing: border-box;
  padding: 15px;
  overflow: auto;

  >.head {
    margin-bottom: 20px;

    >.scan-wrap {
      display: flex;
      align-items: center;
      height: 46px;
      padding: 5px 10px;
      border-radius: 8px;
      color: #1989fa;
      background: #fff;

      >.opt-wrap {
        display: flex;
        align-items: center;
        margin-right: 10px;
        padding-right: 10px;
        border-right: 2px dashed #e0e0e0;

        >.text {
          width: 3em;
          margin-right: 4px;
          font-size: 14px;
        }
      }

      >.ipt-wrap {
        flex: 1;
        display: flex;
        height: 100%;

        >.ipt {
          flex: 1;
          width: 0;
          height: 100%;
          font-size: 20px;
          font-weight: bold;
          line-height: 0;
        }
      }

      >.scan-btn {
        // flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        
        &::before {
          content: '';
          height: 33px;
          border-left: 2px dashed #e0e0e0;
        }

        >.iconfont {
          margin-left: 10px;
          font-size: 20px;
        }
      }
    }

  }

  >.main {
    height: unset;
    font-size: 14px;

    >.content-wrap {
      margin-bottom: 15px;

      >.title-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        >.btn {
          color: #808080;
        }
      }

      >.detl-wrap {
        // display: flex;
        padding: 15px;
        border-radius: 8px;
        font-size: 15px;
        background: #fff;

        >.field-wrap {
          display: flex;
          margin-bottom: 15px;

          >.label {
            min-width: 6.5em;
            color: #808080;
          }

          >.val {
            flex: 1;

            >.img {
              width: 100%;
            }
          }
        }

        >.btn {
          width: 100%;
          height: 37px;
          border-radius: 4px;
        }
      }
    }
  }

}
</style>